<template>
	<view class="">
		<view v-if="hasLogin">
			<view class="recommend">
				<view class="recommend-top">
					<view class="recommend-top-sub">
						<view class="rec-ord">
							<image mode="aspectFit" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/rec-ord.png"></image>
						</view>
						<view class="setting" @click="toEdit">
							<uni-icons size="16" color="#757575" type="settings"></uni-icons>
						</view>
					</view>
					<view class="subWarp" :class="isShowArrow?'':'one'">
						<view v-for="(item,index) in subData" :key="key" @click="sellctSub(index)" :class="isSelectId===item.code?'subItem active':'subItem'">
							{{item.dicName}}
						</view>
					</view>
					<view @click="showMore" class="rec-arr" v-if="isShowArrow">
						<uni-icons  size="14" color="#C5C4C4" type="arrowup"></uni-icons>
					</view>
					<view @click="showLess" class="rec-arr" v-else>
						<uni-icons  size="14" color="#C5C4C4" type="arrowdown"></uni-icons>
					</view>

				</view>
			</view>
			<view class="recommend-warp">
				<view @click="selectRecommend(index)" v-for="(item,index) in recommend" :class="isSelect===index?'recommend-item recommend-active':'recommend-item'"
				 :key="index">{{item}}</view>
			</view>
			<!-- 精选项目 -->
			<view v-if="isSelect===0">
				<view class="project-list">
					<ProjectItem ref='item' :projectList="projectData"></ProjectItem>
				</view>
				<view class="sysNodata" v-if="total==0">
					<image src="../../static/nomorepro.png" mode=""></image>
					<view class="sysNodataTitle">
						暂无相关数据
					</view>
				</view>
				<view class="sysBottomShow" v-if="projectParams.pageIndex*projectParams.pageSize>total&&projectData.length>2&&total!=0">
					已加载今日全部推荐,明天再来吧
				</view>
			</view>
			<!-- 专家 -->
			<view v-if="isSelect===1">
				<ExpertItem :expertList="expertData" ref='item'></ExpertItem>
				<view class="sysNodata" v-if="expertTotal==0">
					<image src="../../static/nomorepro.png" mode=""></image>
					<view class="sysNodataTitle">
						暂无相关数据
					</view>
				</view>
				<view class="sysBottomShow" v-if="isLastPageExp&&expertData.length>2&&expertTotal!=0">
					已加载今日全部推荐,明天再来吧
				</view>
			</view>
			<view v-if="isSelect===2">
				<view class="active-list">
					<ActivityItem :activityList="activeData" ref='item'></ActivityItem>
					<view class="sysNodata" v-if="activeTotal==0">
						<image src="../../static/nomorepro.png" mode=""></image>
						<view class="sysNodataTitle">
							暂无相关数据
						</view>
					</view>
					<view class="sysBottomShow" v-if="isLastPageAct&&activeData.length>2&&expertTotal!=0">
						已加载今日全部推荐,明天再来吧
					</view>
				</view>
			</view>
		</view>
		<block v-else>
			<view class="nodata">
				<image class="img" src="https://www.innovationgloble.com/wxs/img/wx/weidenglu.png" />
				<view class="tip" v-if="isLine">
					您还没有登录，请登录后查看推荐
				</view>
				<view class="btn" @click="goLogin" v-if="isLine">
					登录
				</view>
			</view>
		</block>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import ExpertItem from '@/components/page-componnet/expert-item.vue';
	import ActivityItem from '@/components/page-componnet/activity-item.vue'
	import ProjectItem from '@/components/page-componnet/project-item.vue'
	export default {
		components: {
			ExpertItem,
			ActivityItem,
			ProjectItem
		},
		data() {
			return {
				subData: [],
				recommend: ['精选项目', '推荐专家', '热门活动'],
				isSelect: 0,
				isShowArrow: false,
				leftData: [],
				projectParams: {
					pageSize: 6,
					pageIndex: 1,
				},
				expertParams: {
					pageSize: 6,
					pageNumber: 1,
				},
				activeParams: {
					pageSize: 6,
					pageNum: 1
				},
				projectData: [],
				expertTotal: 0,
				expertData: [],
				activeData: [],
				activeTotal: 0,
				selectId: [],
				allSelectId: '',
				isSelectId: '',
				total: 0,
				isLastPage: false,
				isLastPageAct: false,
				isLastPageExp: false,
			};
		},
		onLoad() {
			// if (this.hasLogin) {
			// 	this.isShowArrow = false;
			// 	this.leftData = [];
			// 	this.selectId = [];
			// 	this.clearData();
			// 	this.getActiveArea();
			// }
		},
		onShow() {
			if (this.isSubscribe||this.hasLogin) {
				this.isShowArrow = false;
				this.isSelectId = ''
				this.leftData = [];
				this.selectId = [];
				this.clearData();
				this.getActiveArea();
			}
		},
		onHide() {
			this.resetIsSubscribe();
			if (this.hasLogin) {
				this.$refs.item.resetOpcity()
			}

		},
		onReachBottom() {
			//项目
			if (this.isSelect === 0) {
				if (this.projectData.length < parseFloat(this.total)) {
					this.projectParams.pageIndex = this.projectParams.pageIndex + 1;
					this.getProjectList()
				}
			}
			//需求
			if (this.isSelect === 1) {
				console.log(this.expertData.length, parseFloat(this.expertTotal))
				if (this.expertData.length < parseFloat(this.expertTotal)) {
					this.expertParams.pageNumber = this.expertParams.pageNumber + 1;
					this.getexpertList()
				}
			}
			//活动
			if (this.isSelect === 2) {
				console.log(this.expertData.length, parseFloat(this.expertTotal))
				if (this.activeData.length < parseFloat(this.activeTotal)) {
					this.activeParams.pageNum = this.activeParams.pageNum + 1;
					this.getActiveList()
				}
			}
		},
		onPullDownRefresh() {
		        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		        this.isShowArrow = false;
		        this.isSelectId = ''
		        this.leftData = [];
		        this.selectId = [];
		        this.clearData();
		        this.getActiveArea();
		 },
		computed: {
			...mapState('userStore', ['hasLogin', 'isSubscribe','isLine'])
		},
		methods: {
			...mapMutations('userStore', ['resetIsSubscribe']),
			//清空列表数据
			clearData() {
				this.projectParams.pageIndex = 1;
				this.projectData = [];
				this.expertParams.pageNumber = 1;
				this.expertData = [];
				this.activeParams.pageNum = 1;
				this.activeData = [];
			},
			goLogin() {
				uni.navigateTo({
					url: '/pagesA/login/login'
				})
			},
			toProjectDetails(item) {
				uni.navigateTo({
					url: '../project-detail/project-detail?scene=' + item.projectId
				})
			},
			showLess() {
				this.isShowArrow = true;
			},
			showMore() {
				

				this.isShowArrow = false;
			},
			selectRecommend(index) {
				if(index!==this.isSelect){
					uni.pageScrollTo({
								scrollTop: 0,
								duration: 300
							});
					this.isSelect = index;
				}
			},
			toEdit() {
				uni.redirectTo({
					url: '/pagesA/subscribe/subscribe'
				})
			},
			//推荐订阅
			getActiveArea() {
				this.subData = [{
					dicName: '全部订阅',
					code: ''
				}];
				this.$request.get({
					url: 'userSubscribe/selectAll',
					force: true
				}).then(res => {
					if (res.length == 0) { //未添加订阅跳到订阅设置页面
						uni.redirectTo({
							url: '/pagesA/subscribe/subscribe'
						})
					} else {
						console.log("====查询========"+this.selectId);
						this.subData = [...this.subData, ...res];
						let codeArr = []
						this.subData.map((item, index) => {
							if (item.code !== "") {
								codeArr.push(item.code)
							}
						})
						this.allSelectId = codeArr.join(',')

						this.projectParams.subCode = this.allSelectId
						this.expertParams.subCode = this.allSelectId
						this.activeParams.subCode = this.allSelectId
						this.getProjectList();
						this.getexpertList();
						this.getActiveList();
						 uni.stopPullDownRefresh();  //停止下拉刷新动画
					}
				})
			},
			//点击我的订阅
			sellctSub(index) {
				this.clearData();
				let codeArr = []
				if (this.subData[index].code === '') {
					this.subData.map((item, index) => {
						if (item.code !== "") {
							codeArr.push(item.code)
						}
					})
					this.allSelectId = codeArr.join(',')
					this.isSelectId = '';
				} else {
					this.allSelectId = this.subData[index].code
					this.isSelectId = this.subData[index].code;
				}
				this.projectParams.subCode = this.allSelectId
				this.expertParams.subCode = this.allSelectId
				this.activeParams.subCode = this.allSelectId
				this.getProjectList();
				this.getexpertList();
				this.getActiveList();
				// if(this.subData[index].isSelect===true){
				// 	this.$set(this.subData[index],'isSelect',false)
				// 	var index = this.selectId.indexOf(this.subData[index].code);
				// 	if (index > -1) { 
				// 	this.selectId.splice(index, 1); 
				// 	}

				// 	if(this.selectId.length===0){

				// 		this.projectParams.subCode = this.allSelectId 
				// 		this.expertParams.subCode = this.allSelectId 
				// 		this.activeParams.subCode = this.allSelectId 
				// 		this.getProjectList();
				// 		this.getexpertList();
				// 		this.getActiveList();
				// 	}else {
				// 		this.subscribeSearch()
				// 	}	
				// }else {
				// 	this.$set(this.subData[index],'isSelect',true)
				// 	this.selectId.push(this.subData[index].code)
				// 	this.subscribeSearch()
				// }
			},
			// //订阅检索
			// subscribeSearch(){
			// 	this.projectParams.subCode = this.selectId.join(',')
			// 	this.expertParams.subCode = this.selectId.join(',')
			// 	this.activeParams.subCode = this.selectId.join(',')		
			// 		this.projectParams.pageIndex = 1;
			// 		this.projectData = [];
			// 		this.getProjectList();
			// 		this.expertParams.pageNum = 1;
			// 		this.expertData = [];
			// 		this.getexpertList();
			// 		this.activeParams.pageNum = 1;
			// 		this.activeData = [];
			// 		this.getActiveList();
			// },
			//推荐项目
			getProjectList() {
				if (this.projectParams.subCode == '') { 
					uni.redirectTo({
						url: '/pagesA/subscribe/subscribe'
					})
				}
				else{
					let params = this.projectParams;
					uni.showLoading({
						title: '加载中'
					})
					this.$request.post({
						url: 'projectInfo/pageQueryList.json',
						data: params
					}).then(res => {
						this.total = res.count;
						this.isLastPage = res.isLastPage
						this.projectData = this.projectData.concat(res.data);
						uni.hideLoading()
					})
				}
			},
			//加载专家列表
			getexpertList() {
				if (this.projectParams.subCode == '') {
					uni.redirectTo({
						url: '/pagesA/subscribe/subscribe'
					})
				}
				else{
					uni.showLoading({
						title: '加载中'
					})
					let params = this.expertParams;
					this.$request.post({
						url: 'ExpertInfo/selectExperInfoByCondition',
						data: params
					}).then(res => {
						this.expertTotal = res.total;
						this.isLastPageExp = res.isLastPage
						for (let k of res.list) {
							k.research = k.research.split(',')

							let priceItems = k.mallInfo;
							if (priceItems && priceItems.length !== 0) {
								//获取到 图文咨询
								const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
								if (picTxtItems.length !== 0) {
									if (parseFloat(picTxtItems[0].isEnable) === 1) {
										k.picTxtItem = picTxtItems[0];
									}
								}
								const phoneItems = priceItems.filter(item => parseInt(item.typeId) === 3);
								if (phoneItems.length !== 0) {
									if (parseFloat(phoneItems[0].isEnable) === 1) {
										k.phoneItem = phoneItems[0];
									}
								}
							}
						}
						this.expertData = [...this.expertData, ...res.list];
						uni.hideLoading()
					})
				}
			},
			//需求列表
			toexperts(item) {
				uni.navigateTo({
					url: '/pages/expert-detail/expert-detail?id=' + item.id
				})
			},
			//項目詳情
			toActiveDetails(item) {
				uni.navigateTo({
					url: "../activity-detail/activity-detail?scene=" + item.id
				})
			},
			//加载活动列表
			getActiveList() {
				if (this.projectParams.subCode == '') {
					uni.redirectTo({
						url: '/pagesA/subscribe/subscribe'
					})
				}
				else{
					uni.showLoading({
						title: '加载中'
					})
					let params = this.activeParams;
					this.$request.get({
						url: 'innovationActivities/showByPage',
						data: params
					}).then(res => {
						res.list.length > 0 ? res.list.map((item, key) => {
							res.list[key].activitiesIndustryName = item.activitiesIndustryName ? item.activitiesIndustryName.split(',') :
								''
						}) : ''
						this.activeTotal = res.total;
						this.isLastPageAct = res.isLastPage
						this.activeData = this.activeData.concat(res.list);
						uni.hideLoading()
					})
				}
			},
			//活动报名
			goSignUp(item) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				let obj = {
					imgAddrs: '',
					activitiesTopic: '',
					startTime: '',
					endTime: '',
					provinceName: '',
					cityName: '',
					regNumber: '',
					isFee: '',
					regFee: '',
					id: '',
					activitiesMode: '',
				};
				for (let key in obj) {
					obj[key] = item[key]
				}
				let json = JSON.stringify(obj);
				uni.navigateTo({
					url: `/pagesA/act-order/act-order?param=${json}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.recommend {
		background: linear-gradient(180deg, rgba(243, 247, 255, 1) 0%, rgba(243, 247, 255, 1) 100%);
		box-sizing: border-box;
		padding-top: 10upx;

		.recommend-title {
			font-size: 34upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			line-height: 48upx;
			text-align: center;
			padding: 36upx 0 46upx 0;
		}

		.recommend-top {
			.recommend-top-sub {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 24upx 0 30upx;

				.rec-ord {
					width: 150upx;
					height: 30upx;

					image {
						width: 150upx;
						height: 30upx;
					}
				}

				.setting {
					width: 60upx;
					height: 60upx;
					text-align: center;
					vertical-align: middle;
				}
			}

			.subWarp {
				display: flex;
				flex-wrap: wrap;
				padding: 0upx 30upx 0 30upx;
				transition: .5s;
				min-height: 105upx;

				.subItem {
					height: 68upx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0upx 0upx 8upx 0px rgba(50, 125, 238, 0.13);
					border-radius: 36upx;
					margin-top: 20upx;
					box-sizing: border-box;
					padding: 0 24upx 0 28upx;
					color: #444444;
					line-height: 68upx;
					margin-right: 20upx;
				}

				.active {
					background: rgba(0, 139, 255, 1);
					color: #FFFFFF;
					box-shadow: 0px 4upx 8upx 0px rgba(0, 139, 255, 0.26);
				}
			}

			.one {
				height: 105upx;
				overflow: hidden;
			}

			.subWarpHidden {
				height: 208upx;
				overflow-y: hidden;
			}

			.rec-arr {
				width: 100upx;
				height: 60upx;
				text-align: center;
				margin: 0 auto;
			}
		}

	}

	.recommend-warp {
		height: 96upx;
		line-height: 96upx;
		display: flex;
		background-color: #FFFFFF;
		position: sticky;
		top: var(--window-top);
		z-index: 99;
		border-bottom: 2upx solid #F2F2F2;

		.recommend-item {
			flex: 1;
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(117, 117, 117, 1);
			text-align: center;
			line-height: 96upx;
		}

		.recommend-active {
			font-weight: 600;
			color: rgba(68, 68, 68, 1);
			line-height: 96upx;
			position: relative;

			&::after {
				content: '';
				display: block;
				position: absolute;
				bottom: 16upx;
				left: 50%;
				transform: translateX(-50%);
				width: 60upx;
				height: 8upx;
				background: linear-gradient(90deg, rgba(0, 138, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
				border-radius: 10upx;
				opacity: 0.48;
			}
		}
	}



	.accountHead {
		width: 46upx !important;
		height: 46upx;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin-right: 20upx;
		margin-bottom: 8upx;
	}

	.position {
		width: 18upx;
		height: 22upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 4upx;
		margin-right: 10upx;
	}

	.peoject-warp {
		width: 100%;
	}

	.project-icon {
		width: 30upx;
		height: 30upx;
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 4upx;
		margin-right: 10upx;
	}

	.nodata {
		display: flex;
		min-height: 100vh;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.tip {
			color: #666666;
			font-size: 26upx;
			margin: 30upx 0;
		}

		.img {
			object-fit: contain;
			height: 288upx;
			width: 374upx;
		}

		.btn {
			width: 145upx;
			height: 69upx;
			background: rgba(42, 125, 250, 1);
			border-radius: 4upx;
			text-align: center;
			line-height: 69upx;
			color: #fff;
		}
	}
</style>
